<template>
  <Card class="add-goods-page"
        dis-hover>
    <p slot="title">编辑商品</p>
    <Form ref="formValidate"
          :rules="ruleValidate"
          :model="formValidate"
          :label-width="70">
      <h4 style="margin-bottom: 20px;">商品信息</h4>
      <Row :gutter="16">
        <i-col span="8">
          <FormItem label="选择分类"
                    prop="OneMenuID">
            <Select ref="OneMenu"
                    :clearable="true"
                    :label-in-value="true"
                    v-model="formValidate.OneMenuID"
                    @on-change="selectOneMenu">
              <Option v-for="item in OneMenu"
                      :value="item.AutoId"
                      :key="item.AutoId">{{ item.ClassName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="二级分类"
                    prop="TwoMenuID">
            <Select ref="TwoMenu"
                    :clearable="true"
                    :label-in-value="true"
                    v-model="formValidate.TwoMenuID"
                    @on-change="selectTwoMenu">
              <Option v-for="item in TwoMenu"
                      :value="item.AutoId"
                      :key="item.AutoId">{{ item.ClassName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="三级分类"
                    prop="ThreeMenuID">
            <Select ref="ThreeMenu"
                    :clearable="true"
                    :label-in-value="true"
                    v-model="formValidate.ThreeMenuID"
                    @on-change="selectThreeMenu">
              <Option v-for="item in ThreeMenu"
                      :value="item.AutoId"
                      :key="item.AutoId">{{ item.ClassName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="商品名称"
                    prop="ProductName">
            <Input v-model="formValidate.ProductName"
                    placeholder="请输入商品名称" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="商品介绍">
            <Input v-model="formValidate.ProductIntroduce"
                    placeholder="请输入商品介绍" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="商品品牌"
                    prop="Brand">
            <Input v-model="formValidate.Brand"
                    placeholder="请输入商品品牌" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="商品货号">
            <Input v-model="formValidate.ProductNum"
                    placeholder="请输入商品货号" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="商品类型">
            <Select v-model="formValidate.ProductType">
              <Option v-for="item in ProductType"
                      :value="item"
                      :key="item">{{ item }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="失效时间"
                    prop="EndTime">
            <DatePicker type="datetime"
                        v-model="formValidate.EndTime"
                        placeholder="选择日期时间"></DatePicker>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="运费">
            <Input v-model="formValidate.Freight"
                    placeholder="请输入运费" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="折旧"
                    prop="Depreciation">
            <Select v-model="formValidate.Depreciation">
              <Option v-for="item in Depreciation"
                      :value="item.number"
                      :key="item.number">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="推荐类型"
                    prop="RecommendatType">
            <Select v-model="formValidate.RecommendatType">
              <Option v-for="item in RecommendatType"
                      :value="item.number"
                      :key="item.number">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="原价"
                    prop="OriginalPrice">
            <Input v-model="formValidate.OriginalPrice"
                    placeholder="请输入原价" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="现价"
                    prop="PresentPrice">
            <Input v-model="formValidate.PresentPrice"
                    placeholder="请输入现价" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="价格区间"
                    prop="IntervalPrice">
            <Input v-model="formValidate.IntervalPrice"
                    placeholder="请输入价格区间（例：420-580）" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="最低价">
            <Input v-model="formValidate.MinPrice"
                    placeholder="请输入最低价" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="最高价">
            <Input v-model="formValidate.MaxPrice"
                    placeholder="请输入最高价" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="打折数">
            <Input v-model="formValidate.DiscountPercent"
                    placeholder="请输入打折数" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="采购地"
                    prop="Source">
            <Input v-model="formValidate.Source"
                    placeholder="请输入采购地" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="所属商家"
                    prop="BusinessID">
            <Select v-model="formValidate.BusinessID">
              <Option v-for="item in Business"
                      :value="item.BusinessMain1"
                      :key="item.BusinessMain1">{{ item.BusinessMain1 }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="审核状态"
                    prop="State">
            <Select v-model="formValidate.State">
              <Option v-for="item in State"
                      :value="item.number"
                      :key="item.number">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="爆款推荐"
                    prop="IsHotProduct">
            <Select v-model="formValidate.IsHotProduct">
              <Option v-for="item in RecommendatType"
                      :value="item.number"
                      :key="item.number">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="今日推荐"
                    prop="IsTodayProduct">
            <Select v-model="formValidate.IsTodayProduct">
              <Option v-for="item in RecommendatType"
                      :value="item.number"
                      :key="item.number">{{ item.text }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="发货地点"
                    prop="SendGoods">
            <Input v-model="formValidate.SendGoods"
                    placeholder="请输入发货地点" />
          </FormItem>
        </i-col>
        <i-col span="8">
          <FormItem label="排序">
            <InputNumber :min="1"
                         v-model="formValidate.Sort"></InputNumber>
          </FormItem>
        </i-col>
      </Row>
      <h4 style="margin-bottom: 20px;">商品图片</h4>
      <Row :gutter="16">
        <i-col span="8">
          <FormItem label="商品封面">
            <Upload :action="actionUrl"
                    :show-upload-list="false"
                    :format="['jpg','jpeg','png']"
                    :before-upload="beforeUp"
                    :on-success="upSuccess"
                    :on-error="upError"
                    :on-format-error="formatError">
              <Button type="primary">上传封面</Button>
              <img class="up-img"
                   :src="formValidate.FirstPicture"
                   v-show="imgShowHide"/>
            </Upload>
          </FormItem>
        </i-col>
        <i-col span="16">
          <FormItem label="商品图片">
            <div class="demo-upload-list"
                 v-for="item in uploadList"
                 :key="item.url">
              <template v-if="item.status === 'finished'">
                <img :src="item.url">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline"
                        @click.native="handleView(item.url)"></Icon>
                  <Icon type="ios-trash-outline"
                        @click.native="handleRemove(item)"></Icon>
                </div>
              </template>
              <template v-else>
                <Progress v-if="item.showProgress"
                          :percent="item.percentage"
                          hide-info></Progress>
              </template>
            </div>
            <Upload ref="upload"
                    :action="actionUrl"
                    :show-upload-list="false"
                    :format="['jpg','jpeg','png']"
                    :before-upload="handleBeforeUpload"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :on-format-error="handleFormatError">
              <Button type="primary">上传图片</Button>
            </Upload>
            <Modal title="图片大图预览"
                   v-model="visible">
              <img :src="imgViewUrl" v-if="visible" style="display: block;margin: 0 auto;max-width: 100%">
            </Modal>
          </FormItem>
        </i-col>
      </Row>
      <h4 style="margin-top: 10px;">商品属性（必填项）</h4>
      <Row :gutter="16"
           style="margin-top: 10px;">
        <i-col span="6"
               v-for="(item, index) in GoodsValKey"
               :key="index">
          <div style="margin-bottom: 10px;">
            <Input v-model="GoodsValKey[index].key" placeholder="商品属性名" style="width: 100px;" /> ：
            <Input v-model="GoodsValKey[index].val" placeholder="商品属性内容" style="width: 100px;" />
          </div>
        </i-col>
        <Button type="primary"
                @click="addGoodsVal">添加属性</Button>
      </Row>
      <h4 style="margin-top: 10px;">商品标签（必填项）</h4>
      <Row :gutter="16"
           style="margin-top: 10px;">
        <i-col style="overflow: hidden;margin-bottom: 10px;">
          <Input class="label-input" v-model="GoodsLabelOnesKey" placeholder="标签名称" />
          <template v-for="(item, index) in GoodsLabelOneVals">
            <Input :key="index" class="label-input" v-model="GoodsLabelOneVals[index]" placeholder="标签内容" />
          </template>
            <Button type="primary"
                    style="float: left;"
                    @click="addGoodsLabelOne">添加标签内容</Button>
        </i-col>
        <i-col style="overflow: hidden;margin-bottom: 10px;">
          <Input class="label-input" v-model="GoodsLabelTwosKey" placeholder="标签名称" />
          <template v-for="(item, index) in GoodsLabelTwoVals">
            <Input :key="index" class="label-input" v-model="GoodsLabelTwoVals[index]" placeholder="标签内容" />
          </template>
            <Button type="primary"
                    style="float: left;"
                    @click="addGoodsLabelTwo">添加标签内容</Button>
        </i-col>
        <Button type="primary"
                style="display: block;margin-bottom: 10px;"
                @click="groupGoodsLabel">生成组合规格</Button>
        <i-col span="24"
               v-if="groupLabelShowHide"
               v-for="(item, index) in groupLabel"
               :key="index">
          <div class="label-formItem"
               style="width: auto;height: 32px;line-height: 32px;">{{ item.GoodsLabel }}</div>
          <FormItem class="label-formItem"
                    label="库存">
            <Input v-model="groupLabel[index].GoodsCount" placeholder="请输入库存" />
          </FormItem>
            <FormItem class="label-formItem"
                      label="价格">
              <Input v-model="groupLabel[index].GoodsPrice" placeholder="请输入价格" />
          </FormItem>
              <FormItem class="label-formItem"
                        label="运费">
                <Input v-model="groupLabel[index].SendPrice" placeholder="请输入运费" />
          </FormItem>
        </i-col>
      </Row>
      <div class="button-group">
        <Button type="primary"
                @click="handleSubmit('formValidate')">提交</Button>
        <Button type="success"
                style="margin-left: 10px;"
                @click="goBack">返回</Button>
      </div>
    </Form>
  </Card>
</template>

<script>
import config from '@/config'
import { getSellerList } from '@/api/seller'
import { getGoodsDetail, getGoodsClassList, editGoodsDetail, getGoodsAttrList } from '@/api/goods'
export default {
  name: 'edit',
  data () {
    return {
      modal1: false,
      loading: true,
      classNameState: false,
      ProductType: ['官方直营', '普通商品', '热销商品'],
      Depreciation: [
        {
          number: 0,
          text: '全新'
        },
        {
          number: 1,
          text: '二手'
        }
      ],
      State: [
        {
          number: 0,
          text: '未通过'
        },
        {
          number: 1,
          text: '已通过'
        }
      ],
      RecommendatType: [
        {
          number: 0,
          text: '不推荐'
        },
        {
          number: 1,
          text: '推荐'
        }
      ],
      ClassName: '',
      formValidate: {},
      ruleValidate: {
        ProductName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        Brand: [
          { required: true, message: '请输入商品品牌', trigger: 'blur' }
        ],
        EndTime: [
          { required: true, type: 'date', message: '请选择商品失效时间', trigger: 'change' }
        ],
        State: [
          { required: true, type: 'number', message: '请选择商品审核状态', trigger: 'change' }
        ],
        OneMenuID: [
          { required: true, pattern: /.+/, message: '请选择一级商品类型', trigger: 'change' } // pattern: /.+/
        ],
        TwoMenuID: [
          { required: true, pattern: /.+/, message: '请选择二级商品类型', trigger: 'change' }
        ],
        ThreeMenuID: [
          { required: true, pattern: /.+/, message: '请选择三级商品类型', trigger: 'change' }
        ],
        Depreciation: [
          { required: true, type: 'number', message: '请选择商品折旧', trigger: 'change' }
        ],
        OriginalPrice: [
          { required: true, pattern: /.+/, message: '请输入商品原价', trigger: 'blur' }
        ],
        PresentPrice: [
          { required: true, pattern: /.+/, message: '请输入商品现价', trigger: 'blur' }
        ],
        Source: [
          { required: true, message: '请输入商品采购地', trigger: 'blur' }
        ],
        RecommendatType: [
          { required: true, type: 'number', message: '请选择商品推荐类型', trigger: 'change' }
        ],
        BusinessID: [
          { required: true, pattern: /.+/, message: '请选择商品所属商家', trigger: 'change' }
        ],
        IntervalPrice: [
          { required: true, message: '请输入商品价格区间', trigger: 'blur' }
        ],
        IsHotProduct: [
          { required: true, type: 'number', message: '请选择商品是否爆款推荐', trigger: 'change' }
        ],
        IsTodayProduct: [
          { required: true, type: 'number', message: '请选择商品是否今日推荐', trigger: 'change' }
        ],
        SendGoods: [
          { required: true, message: '请输入商品发货地点', trigger: 'blur' }
        ]
      },
      OneMenu: [],
      TwoMenu: [],
      ThreeMenu: [],
      Business: [],
      actionUrl: '',
      imgShowHide: false,
      imgViewUrl: '',
      visible: false,
      uploadList: [],
      GoodsValKey: [], // 商品参数
      GoodsLabels: [], // 商品标签
      GoodsLabelOnesKey: '', // 商品一标签
      GoodsLabelOneVals: [''], // 商品一标签(手动添加的)
      GoodsLabelTwosKey: '', // 商品二标签
      GoodsLabelTwoVals: [''], // 商品二标签(手动添加的)
      groupLabelShowHide: false,
      groupLabel: []
    }
  },
  mounted () {
    this.init()
    this.getAxiosUrl()
    this.getSellerList()
    this.getOneMenu()
    this.uploadList = this.$refs.upload.fileList
    this.getEditGoodsDetail()
  },
  methods: {
    init () {
      this.modal1 = false
      this.loading = true
      this.formValidate = {}
      this.editData = {}
      this.handleReset('formValidate')
    },
    // 获取下级分类菜单
    getNextMenu (whitchMenu, fatherID) {
      const requestData = {
        'PageIndex': '1',
        'PageSize': '50',
        'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: fatherID }]
      }
      getGoodsClassList(requestData).then(res => {
        if (res.data.success) {
          whitchMenu = res.data.data.aaData
        }
      })
    },
    getEditGoodsDetail () {
      const ProductID = this.$route.query.id
      getGoodsDetail({ ProductID }).then(res => {
        if (res.data.success) {
          this.formValidate = res.data.data[0]
          this.getNextMenu(this.ThreeMenu, this.TwoMenuID)
          this.formValidate.OneMenuID = this.OneMenu[0]
          this.formValidate.TwoMenuID = this.TwoMenu[0]
          this.formValidate.ThreeMenuID = this.ThreeMenu[0]
          const requestData = {
            'PageIndex': '1',
            'PageSize': '50',
            'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: fatherID }]
          }
          getGoodsClassList(requestData).then(res => {
            if (res.data.success) {
              whitchMenu = res.data.data.aaData
            }
          })
          // 商品图片
          if (this.formValidate.FirstPicture !== '') {
            this.imgShowHide = true
          }
          if (this.formValidate.DetailPicture !== '') {
            this.uploadList = this.formValidate.DetailPicture.split(',')
          }
          // 商品参数
          if (this.formValidate.GoodsVal !== '') {
            if (this.formValidate.GoodsVal.indexOf('|') !== -1) {
              let valsArr = this.formValidate.GoodsVal.split('|')
              for (let i = 0; i < valsArr.length; i++) {
                this.GoodsValKey.push({
                  key: valsArr[i].split(':')[0],
                  val: valsArr[i].split(':')[1]
                })
              }
            } else {
              this.GoodsValKey = [{
                key: this.formValidate.GoodsVal.split(':')[0],
                val: this.formValidate.GoodsVal.split(':')[1]
              }]
            }
          }
          // 商品标签参数
          if (this.formValidate.GoodsLabel !== '') {
            if (this.formValidate.GoodsLabel.indexOf('|') !== -1) {
              let valsArr = this.formValidate.GoodsLabel.split('|')
              this.GoodsLabelOnesKey = valsArr[0].split(':')[0]
              this.GoodsLabelOneVals = valsArr[0].split(':')[1].split(',')
              this.GoodsLabelTwosKey = valsArr[1].split(':')[0]
              this.GoodsLabelTwoVals = valsArr[1].split(':')[1].split(',')
            } else {
              this.GoodsLabelOnesKey = this.formValidate.GoodsLabel.split(':')[0]
              this.GoodsLabelOneVals = this.formValidate.GoodsLabel.split(':')[1].split(',')
            }
            this.groupLabel = this.formValidate.Proinfo
            this.groupLabelShowHide = true
          }
        } else {
          this.$Message.info(res.data.msg || '系统错误，请稍后再试！')
        }
      })
    },
    getAxiosUrl () {
      const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
      this.actionUrl = baseUrl + '/UploadFile/UploadFile'
    },
    // 获取商家
    getSellerList () {
      const requestData = {
        'PageIndex': '1',
        'PageSize': '50'
      }
      getSellerList(requestData).then(res => {
        if (res.data.success) {
          this.Business = res.data.data.aaData
        }
      })
    },
    // 获取一级分类菜单
    getOneMenu () {
      const requestData = {
        'PageIndex': '1',
        'PageSize': '50',
        'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: '' }]
      }
      getGoodsClassList(requestData).then(res => {
        if (res.data.success) {
          this.OneMenu = res.data.data.aaData
        }
      })
    },
    selectOneMenu (opt) {
      this.$refs.TwoMenu.clearSingleSelect()
      this.$refs.ThreeMenu.clearSingleSelect()
      if (opt) {
        this.formValidate.OneMenuID = opt.value
        this.formValidate.OneMenuName = opt.label
        const requestData = {
          'PageIndex': '1',
          'PageSize': '50',
          'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: opt.value }]
        }
        getGoodsClassList(requestData).then(res => {
          if (res.data.success) {
            this.TwoMenu = res.data.data.aaData
          }
        })
      } else {
        this.formValidate.OneMenuID = ''
        this.formValidate.OneMenuName = ''
      }
    },
    selectTwoMenu (opt) {
      this.$refs.ThreeMenu.clearSingleSelect()
      if (opt) {
        this.formValidate.TwoMenuID = opt.value
        this.formValidate.TwoMenuName = opt.label
        const requestData = {
          'PageIndex': '1',
          'PageSize': '50',
          'Search': [{ Key: 'ClassName', Value: '' }, { Key: 'FatherId', Value: opt.value }]
        }
        getGoodsClassList(requestData).then(res => {
          if (res.data.success) {
            this.ThreeMenu = res.data.data.aaData
          }
        })
      } else {
        this.formValidate.TwoMenuID = ''
        this.formValidate.TwoMenuName = ''
      }
    },
    selectThreeMenu (opt) {
      if (opt) {
        this.formValidate.ThreeMenuID = opt.value
        this.formValidate.ThreeMenuName = opt.label
        this.getGoodsAttrsList(opt.value)
      } else {
        this.formValidate.ThreeMenuID = ''
        this.formValidate.ThreeMenuName = ''
        this.GoodsValKey = []
      }
    },
    // 根据三级分类获取商品属性
    getGoodsAttrsList (ThreeMenuID) {
      const requestData = {
        'PageIndex': '1',
        'PageSize': '50',
        'Search': [{ 'Key': 'ClassID', 'Value': ThreeMenuID }]
      }
      getGoodsAttrList(requestData).then(res => {
        if (res.data.success) {
          const OrdKey = res.data.data.aaData.length
          if (OrdKey > 0) {
            const goodsKeys = res.data.data.aaData[0].OrdKey.split(',')
            for (let i = 0; i < goodsKeys.length; i++) {
              const oneKey = {
                key: '',
                val: ''
              }
              oneKey.key = goodsKeys[i]
              this.GoodsValKey.push(oneKey)
            }
          } else {
            this.GoodsValKey = []
          }
        }
      })
    },
    handleSubmit (name) {
      this.testSubmit()
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.groupLabelShowHide) {
            this.formValidate.SysUserId = localStorage.getItem('userId')
            editGoodsDetail(this.formValidate).then(res => {
              if (res.data.success) {
                this.modal1 = false
                this.loading = true
                this.$Message.info('编辑成功!')
              } else {
                this.modal1 = true
                this.loading = false
                this.$Message.info('编辑失败!')
              }
            }).then(() => {
              this.$emit('getList')
              this.$router.push({
                name: 'goods_list'
              })
            })
          } else {
            this.$Message.error('请先生成商品标签规格属性!')
          }
        } else {
          this.$Message.error('请填写必填项!')
        }
      })
    },
    // 重置表单
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    beforeUp () {
      this.formValidate.FirstPicture = ''
      this.imgShowHide = false
    },
    upSuccess (response) {
      this.formValidate.FirstPicture = response.data[0].url
      this.imgShowHide = true
      this.$Message.success('上传成功！')
    },
    upError (error) {
      console.log(error)
    },
    formatError (file) {
      this.$Message.info(`您上传的 "${file.name}" 不符合上传规则，请上传jpg、jpeg、png格式的图片文件！`)
    },
    handleView (name) {
      this.imgViewUrl = name
      this.visible = true
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (res, file) {
      file.url = res.data[0].url
      file.name = res.data[0].fileName
      this.formValidate.DetailPicture = this.uploadList.map(item => item.url)
    },
    handleError (error) {
      console.log(error)
    },
    handleFormatError (file) {
      this.$Message.info(`您上传的 "${file.name}" 不符合上传规则，请上传jpg、jpeg、png格式的图片文件！`)
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Message.info('您上传的图片超过了5张！')
      }
      return check
    },
    // 添加商品参数
    addGoodsVal () {
      if (this.GoodsValKey.length === 0) {
        this.GoodsValKey.push({
          key: '',
          val: ''
        })
      } else if (this.GoodsValKey.length > 0 && this.GoodsValKey.some((item) => item.key === '')) {
        this.$Message.info('请填写商品属性必填项!')
      } else if (this.GoodsValKey.length > 0 && this.GoodsValKey.some((item) => item.val === '')) {
        this.$Message.info('请填写商品属性必填项!')
      } else {
        this.GoodsValKey.push({
          key: '',
          val: ''
        })
      }
    },
    // 添加商品标签
    addGoodsLabel () {
      if (this.GoodsLabels.length === 0) {
        this.GoodsLabels.push({
          key: '',
          val: '',
          GoodsCount: '',
          GoodsPrice: '',
          SendPrice: ''
        })
      } else if (this.GoodsLabels.length > 0 && this.GoodsLabels.some((item) => item.key === '')) {
        this.$Message.info('请填写商品标签必填项!')
      } else if (this.GoodsLabels.length > 0 && this.GoodsLabels.some((item) => item.val === '')) {
        this.$Message.info('请填写商品标签必填项!')
      } else {
        this.GoodsLabels.push({
          key: '',
          val: '',
          GoodsCount: '',
          GoodsPrice: '',
          SendPrice: ''
        })
      }
    },
    testSubmit () {
      if (this.GoodsValKey.length === 0) {
        this.$Message.info('请添加商品属性!')
      } else if (this.GoodsValKey.length > 0 && this.GoodsValKey.some((item) => item.key === '')) {
        this.$Message.info('请填写商品属性必填项!')
      } else if (this.GoodsValKey.length > 0 && this.GoodsValKey.some((item) => item.val === '')) {
        this.$Message.info('请填写商品属性必填项!')
      }
      if (this.groupLabel.length === 0) {
        this.$Message.info('请添加商品标签!')
      } else if (this.groupLabel.length > 0 && this.groupLabel.some((item) => item.GoodsCount === '')) {
        this.$Message.info('请填写商品标签必填项!')
      } else if (this.groupLabel.length > 0 && this.groupLabel.some((item) => item.GoodsPrice === '')) {
        this.$Message.info('请填写商品标签必填项!')
      }
      // 组合商品标签参数
      this.formValidate.Proinfo = this.groupLabel
      // 主商品商品参数
      let keyValOneArr = []
      for (let i = 0; i < this.GoodsValKey.length; i++) {
        const pushOne = this.GoodsValKey[i].key + ':' + this.GoodsValKey[i].val
        keyValOneArr.push(pushOne)
      }
      this.formValidate.GoodsVal = keyValOneArr.join('|')
      // 主商品商品标签参数
      const GoodsLabelOne = this.GoodsLabelOnesKey + ':' + this.GoodsLabelOneVals.join(',')
      const GoodsLabelTwo = this.GoodsLabelTwosKey + ':' + this.GoodsLabelTwoVals.join(',')
      this.formValidate.GoodsLabel = GoodsLabelOne + '|' + GoodsLabelTwo
    },
    addGoodsLabelOne () {
      this.GoodsLabelOneVals.push('')
    },
    addGoodsLabelTwo () {
      this.GoodsLabelTwoVals.push('')
    },
    groupGoodsLabel () {
      if (this.GoodsLabelOneVals.filter(item => item !== '').length === 0 || this.GoodsLabelTwoVals.filter(item => item !== '').length === 0) {
        this.$Message.info('请填写商品标签内容！')
      } else {
        this.groupLabel = []
        let groupLabelsArr = []
        let groupLabels = ''
        for (let i = 0; i < this.GoodsLabelOneVals.length; i++) {
          for (let j = 0; j < this.GoodsLabelTwoVals.length; j++) {
            groupLabels = ''
            groupLabels += this.GoodsLabelOnesKey + ':' + this.GoodsLabelOneVals[i] + '|'
            groupLabels += this.GoodsLabelTwosKey + ':' + this.GoodsLabelTwoVals[j]
            groupLabelsArr.push(groupLabels)
            this.groupLabel.push({
              AutoID: '',
              GoodsLabel: groupLabels,
              GoodsCount: '',
              GoodsPrice: '',
              SendPrice: 0,
              GoodImgUrl_Path: '',
              GoodImgUrl: ''
            })
          }
        }
        // console.log(this.groupLabel)
        this.groupLabelShowHide = true
      }
    },
    goBack () {
      this.$router.push({
        name: 'goods_list'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.add-goods-page {
  min-height: 85vh;
  background-color: #fff;
  .up-img {
    display: block;
    margin-top: 10px;
    max-width: 300px;
    max-height: 300px;
  }
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }
  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }
  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .button-group {
    margin-top: 20px;
    text-align: center;
  }
  .label-input {
    display: block;
    float: left;
    margin-right: 6px;
    width: 100px;
  }
  .label-formItem {
    display: block;
    float: left;
    margin-right: 6px;
  }
}
</style>
